<template>
  <view>
    <view class="top">
      <view class="part">
        <view>
          <image src="/static/消息.png"></image>
        </view>
        <view class="user">
          <image src="/static/user.jpg"></image>
        </view>
        <view>
          <image src="/static/客服.png"></image>
        </view>
      </view>
      <view class="part">
        <view class="top_left">
          <text class="center">{{reduceCo2}}</text>
          <text>\n减少CO</text>
          <text style="font-size: xx-small;">2</text>
          <text class="hui">(kg)</text>
        </view>
        <view class="top_right">
          <text class="center">{{recycleAmount}}</text>
          <text>\n回收总量</text>
          <text class="hui">(kg)</text>
        </view>
      </view>
      <view class="part">
        <view class="top_right">
          <text class="center">{{point}}</text>
          <text>\n</text>
          <!-- <image src="/static/积分.png"></image> -->
          <text>可用积分</text>
          <text class="hui">(分)</text>
        </view>
        <view class="top_right">
          <text class="center">{{balance}}</text>
          <text>\n账户余额</text>
          <text class="hui">(元)</text>
        </view>
      </view>
    </view>
    <view class="top">
      <view class="bottom">
        我的订单
      </view>
      <view class="part1">
        <!-- <navigator url="/pages/reorder/reorder"> -->
        <view class="xian">
          <text>回收订单</text>
          <text>\n</text>
          <text decode="true">&nbsp;&nbsp;&nbsp;&nbsp;{{recycleOrderNumber}}</text>
          <text>\n</text>
          <text class="hui">订单数</text>
        </view>
        <!-- </navigator> -->
        <navigator open-type="navigateTo" url="/pages/reorder/reorder?key=0">
          <view class="tubiao">
            <image src="/static/进行中.png"></image>
            <text>\n</text>
            <text>进行中</text>
          </view>
        </navigator>
        <navigator open-type="navigateTo" url="/pages/reorder/reorder?key=1">
          <view class="tubiao">
            <image src="/static/已完成.png"></image>
            <text>\n</text>
            <text>已完成</text>
          </view>
        </navigator>
      </view>
      <view class="part1">
        <view class="xian">
          <text>积分订单</text>
          <text>\n</text>
          <text decode="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;{{pointOrderNumber}}</text>
          <text>\n</text>
          <text class="hui">订单数</text>
        </view>
        <navigator open-type="navigateTo" url="/pages/cardOrder/cardOrder?key=0">
          <view class="tubiao">
            <image src="/static/待发货.png"></image>
            <text>\n</text>
            <text>待发货</text>
          </view>
        </navigator>
        <navigator open-type="navigateTo" url="/pages/cardOrder/cardOrder?key=1">
          <view class="tubiao">
            <image src="/static/待收货.png"></image>
            <text>\n</text>
            <text>待收货</text>
          </view>
        </navigator>
        <navigator open-type="navigateTo" url="/pages/cardOrder/cardOrder?key=2">
          <view class="tubiao">
            <image src="/static/已完成.png"></image>
            <text>\n</text>
            <text>已完成</text>
          </view>
        </navigator>
      </view>
    </view>
    <view class="top">
      <view class="bottom" @tap="gotonewaddress">
        <view class="ge">
          地址管理
        </view>
        <view class="right">
          <image src="/static/箭头 右.png"></image>
        </view>
      </view>
      <navigator open-type="navigateTo" url="/pages/story/story1?key=https://mp.weixin.qq.com/s/ivRneLvkzSy9lVY7p650SQ">
        <view class="bottom">
          <view class="ge">
            回收须知
          </view>
          <view class="right">
            <image src="/static/箭头 右.png"></image>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        point: 0,
        pointOrderNumber: 0,
        recycleAmount: 0,
        recycleOrderNumber: 0,
        reduceCo2: 0,
        balance: 0,
      }
    },
    onLoad: function() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + '/getUserInfo',
        method: 'post',
        data: {
          userId: uni.getStorageSync("userId")
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          console.log(getApp().globalData.baseUrl + '/getUserInfo')
          console.log(res)
          that.point = res.data.point
          that.pointOrderNumber = res.data.pointOrderNumber
          that.recycleAmount = res.data.recycleAmount
          that.recycleOrderNumber = res.data.recycleOrderNumber
          that.reduceCo2 = res.data.reduceCo2
          that.balance = res.data.balance
        }
      })
    },
    onShow: function() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + '/getUserInfo',
        // url: that.$baseUrl + '/getUserInfo',
        // url: 'http://localhost:8080/getUserInfo',
        method: 'post',
        data: {
          userId: uni.getStorageSync("userId")
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          // console.log(res)
          that.point = res.data.point
          that.pointOrderNumber = res.data.pointOrderNumber
          that.recycleAmount = res.data.recycleAmount
          that.recycleOrderNumber = res.data.recycleOrderNumber
          that.reduceCo2 = res.data.reduceCo2
          that.balance = res.data.balance
        }
      })
    },
    methods: {
      gotonewaddress() {
        uni.navigateTo({
          url: '/pages/my/address',
        })
      },
    }
  }
</script>

<style>
  page {
    background-color: #dbdada;
  }

  .top {
    margin: 40rpx 20rpx 10rpx 20rpx;
    border: white 10rpx solid;
    border-radius: 10rpx;
    background-color: white;
  }



  .part {
    margin: 60rpx 40rpx;
    display: flex;
    /* justify-content: space-between; */
    justify-content: space-around;
  }

  .part image {
    width: 60rpx;
    height: 60rpx;
  }

  .part .user {
    margin-right: 50rpx;
  }

  .part .user image {
    width: 150rpx;
    height: 150rpx;
    justify-content: center;
  }

  .hui {
    /* font-size: xx-small; */
    color: #949090;
  }

  .center {
    /* text-align: center; */
    color: rgb(9, 145, 65);
    padding-left: 60rpx;
  }

  .top_right image {
    height: 40rpx;
    width: 40rpx;
  }

  .part1 {
    margin: 60rpx 40rpx;
    display: flex;
    justify-content: flex-start;
  }

  .part1 image {
    width: 60rpx;
    height: 60rpx;
  }

  .part .user {
    border: 50%;
    width: 100rpx;
    height: 100rpx;
  }

  .tubiao {
    padding-left: 40rpx;
    width: 100rpx;
    /* border: 2rpx solid black; */
  }

  .xian {
    padding-right: 40rpx;
    border-right: darkgray;
    border-width: 0 2rpx 0 0;
    border-style: solid;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 40rpx 0 40rpx;
    padding-bottom: 20rpx;
    border-bottom: darkgray;
    border-width: 0 0 2rpx 0;
    border-style: solid;
  }

  .bottom image {
    height: 40rpx;
    width: 40rpx;
  }
</style>